<template>
    <div>
        <el-dialog
            :title="formChange.title"
            :visible.sync="show"
            :beforeClose="(close)=>{clearForm('formRef',close)}"
            :closeOnClickModal="false"
            width="1000px"
            :append-to-body="true"
        >
            <el-form
                :model="myData"
                label-width="80px"
                :rules="formRules"
                ref="formRef"
                autocomplete="off"
            >
                <table style="width:100%;">
                    <tr>
                        <td colspan="2">
                            <el-form-item label="手机" prop="phone">
                                <el-input v-model="myData.phone"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="姓名" prop="name">
                                <el-input v-model="myData.name"></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="登录名称" prop="username">
                                <el-input v-model="myData.username"></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="登录密码" autocomplete="new-password" prop="password">
                                <el-input
                                    type="password"
                                    v-model="myData.password"
                                    autocomplete="off"
                                ></el-input>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item
                                label="确认密码"
                                autocomplete="new-password"
                                prop="qrpassword"
                            >
                                <el-input
                                    type="password"
                                    v-model="myData.qrpassword"
                                    autocomplete="off"
                                ></el-input>
                            </el-form-item>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <el-form-item label="角色" prop="roles">
                                <el-checkbox-group v-model="myData.roles">
                                    <el-checkbox
                                        v-for="item in role"
                                        :key="item.id"
                                        :label="item.id"
                                        :name="item.id"
                                    >{{item.name}}</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                        </td>
                        <td>
                            <el-form-item label="用户状态" prop="status">
                                <el-select
                                    v-model="myData.status"
                                    placeholder="用户状态"
                                    style="width:100%;"
                                >
                                    <el-option label="禁用" :value="0"></el-option>
                                    <el-option label="正常" :value="1"></el-option>
                                </el-select>
                            </el-form-item>
                        </td>
                    </tr>
                </table>

                <el-form-item class="txt_r mt_20">
                    <el-button
                        v-if="formChange.btn"
                        type="primary"
                        @click="submit"
                    >{{formChange.btnVal}}</el-button>
                    <el-button @click="()=>{clearForm('formRef')}">取消</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </div>
</template>

<script>
import { getRoles } from "../../api/system/adminRequest";
import { getTree } from "../../api/system/institutiion";

export default {
    name: "authAdminForm",
    data() {
        return {
            // 角色
            role: [],
            // 数据
            myData: { roles: [] },
            // 机构树
            tree: [],
            // 验证
            formRules: {
                hasCourt: [{required: true,message: "请选择归属部门",trigger: "change"}],
                job_number: [{ required: true, message: "请输入工号", trigger: "blur" }],
                name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
                username: [{ required: true, message: "请输入登录名", trigger: "blur" }],
                password: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    {
                        pattern: /^[^\u4e00-\u9fa5]{5,}$/,
                        message: "请输入大于4位的密码",
                        trigger: "blur"
                    }
                ],
                qrpassword: [
                    { required: true, message: "请输入密码", trigger: "blur" },
                    {
                        validator: (rule, value, callback) => {
                            if (value !== this.myData.password) {
                                return callback(new Error("两次密码不一致"));
                            }
                            return callback();
                        },
                        trigger: "blur"
                    }
                ],
                phone: [
                    {
                        required: true,
                        message: "请输入手机号码",
                        trigger: "blur"
                    },
                    {
                        pattern: /^1\d{10}$/,
                        message: "请输入正确的手机号码",
                        trigger: "blur"
                    }
                ],
                court: [
                    {
                        required: true,
                        message: "请输入法院名称",
                        trigger: "blur"
                    }
                ],
                roles: [
                    {
                        type: "array",
                        required: true,
                        message: "请至少选择一个角色",
                        trigger: "change"
                    }
                ],
                status: [
                    {
                        required: true,
                        message: "请选择用户状态",
                        trigger: "change"
                    }
                ],
                tel: [
                    {
                        pattern: /(^(\d{2,4}[-_－—]?)?\d{3,8}([-_－—]?\d{3,8})?([-_－—]?\d{1,7})?$)|(^0?1[35]\d{9}$)/,
                        message: "请输入正确的电话号码",
                        trigger: "blur"
                    }
                ],
                email: [
                    {
                        type: "email",
                        message: "请输入正确的邮箱地址",
                        trigger: "blur,change"
                    }
                ]
            },
            // 设置标题按钮文字
            formChange: {}
        };
    },
    props: {
        formData: { type: Object, required: {} },
        show: { type: Boolean, required: false },
        formType: { type: Number, required: 1 }
    },

    methods: {
        // 提交
        submit() {
            this.$refs["formRef"].validate(valid => {
                if (!valid) {
                    return false;
                }
                let fun = "";
                switch (this.formType) {
                    case 1:
                        fun = "addSubmit";
                        break;
                    case 2:
                        fun = "editSubmit";
                        break;
                }
                let obj = JSON.parse(JSON.stringify(this.myData));
                // for(let i in this.tree){
                //     if(obj.mechanismId == this.tree[i].id){
                //         obj.mechanismPid = this.tree[i].pid;
                //         break;
                //     }
                // }
                this.$emit(fun, obj);
                this.clearForm("formRef");
            });
        },
        // 获取树
        getTrees() {
            // 机构树
            getTree().then(data => {
                if (data.code) {
                    return;
                }
                this.tree = data.data.list;
            });
        },
        // 获取角色
        getRole() {
            getRoles()
                .then(data => {
                    if (data.code) {
                        return;
                    }
                    this.role = data.data.list;
                    for (let i in this.role) {
                        this.role[i].id = String(this.role[i].id);
                    }
                })
                .catch(() => {});
        },
        // 清空表单  name: 表单rel名称，close：关闭方法/显示属性
        clearForm(name, close) {
            if (this.$refs[name]) {
                this.$refs[name].resetFields();
            }
            this.$emit("closeForm");
        },
        setFormTxt() {
            let o = {};
            switch (this.formType) {
                case 1:
                    o = {
                        title: "添加用户",
                        btn: true,
                        btnVal: "添加",
                        submit: "add"
                    };
                    break;
                case 2:
                    o = {
                        title: "修改用户",
                        btn: true,
                        btnVal: "修改",
                        submit: "edit"
                    };
                    break;
            }
            this.formChange = o;
        }
    },
    created() {
        this.getRole();
        // this.getTrees();
        this.setFormTxt();
    },
    watch: {
        show(val) {
            if (!val) {return false;}
            this.formRules.password[0].required = this.formType === 1;
            this.formRules.qrpassword[0].required = this.formType === 1;
            // this.getTrees();
            if (this.formType === 2) {
                this.myData = JSON.parse(JSON.stringify(this.formData));
                for (let i in this.myData.roles) {
                    this.myData.roles[i] = String(this.myData.roles[i]);
                }
            } else {
                this.myData = {roles: [], status:1 };
            }
        },
        formType(val) {
            this.setFormTxt();
        }
    }
};
</script>

<style scoped>
.el-select,
.el-input {
    width: 320px !important;
}
/*.el-form-item{margin-bottom:10px!important;}*/
.mt_20 {
    margin-top: 20px;
}
.txt_r {
    text-align: right;
}
</style>
